<template>
	<view class="logins">
		<nav-bar isBack  title="我的优惠券" ></nav-bar>
		<!-- 顶部 -->
		<view class="i_cont">
	         <view class="wrapper" v-for="(item,index) in Couponlist" :key="index">
	            <view class="left">
					<view class="pirce">￥<text>{{item.discount_money}}</text></view>
					<view class="pircecom">满{{item.condition}}可用</view>
				</view>
	            <view class="right">
					<view class="time">有效期间</view>
					<view class="time" v-if="item.start_time==0">全类型不限制时间</view>
					<view class="time" v-else>{{item.start_time | formatDate}} - {{item.end_time |formatDate}} </view>
				</view>
	            </view>
		</view>
	</view>
</template>

<script>
import navBar from "@/components/navBar/navBar.vue"
import service_my from '@/service/my.js'
import service_mall from '@/service/mall.js'
import URL from '@/config/url.js'


export default {
	components: { navBar },
	
	data() {
		return {
			Couponlist:[],
		}
	},
	onLoad(params) {
		this.$utils.getUrl()
      this.getsaleCoupon()
	  //#ifdef MP-WEIXIN
	  	this.terminal = "wxapplet";
	  //#endif
	},
	filters: {
		formatDate(value) {
			let date = new Date(parseInt(value) * 1000);
			let y = date.getFullYear();
			let m = date.getMonth() + 1;
			m = m < 10 ? "0" + m : m;
			let d = date.getDate();
			d = d < 10 ? "0" + d : d;
			let h = date.getHours();
			h = h < 10 ? "0" + h : h;
			let minute = date.getMinutes();
			let second = date.getSeconds();
			minute = minute < 10 ? "0" + minute : minute;
			second = second < 10 ? "0" + second : second;
			return y +"-" + m + "-" + d;
		}
	},
	methods: {
		getsaleCoupon(){
			service_mall.discountslist({
			})
			.then(res => {
				if (res.code == 1) {
                  let data = res.data
                  this.Couponlist = data
				}else{
					uni.showToast({title: res.msg, icon: "none"});
				}
			})
		},
     
	}
}
</script>

<style lang="scss" scoped>
.logins{
	width: 100vw;height: 100vh;background: #fff;display: flex;flex-flow: column;
}
.i_cont{
	position: relative;
	
}
.wrapper {
  display: flex;
  position: relative;
  height: 160rpx;
  margin: 30rpx;
  filter: drop-shadow(1px 1px 1px #ffced0);
}
.wrapper view{
  height: 100%;
}

.left {
  position: relative;
  background: #58a;
  background: radial-gradient(circle at top right, transparent 5px, #fff0f0 0) top right, radial-gradient(circle at bottom right, transparent 5px, #fff0f0 0) bottom right;
  background-size: 100% 60%;
  background-repeat: no-repeat;
  color: white;
  width: 32%;
  border-radius: 10rpx 0 0 10rpx;
}

.right {
  position: relative;
  background: #58a;
  background: radial-gradient(circle at top left, transparent 5px, #fffcfc 0) top left,radial-gradient(circle at bottom left, transparent 5px, #fffcfc 0) bottom left;
  background-size: 100% 60%;
  background-repeat: no-repeat;
  width: 68%;
  color: white;
  border-radius: 0 10rpx 10rpx 0; 
}
.right::after{
  content: "";
  position: absolute;
  top:12rpx;
  height: 140rpx;
  border-left: 1rpx dashed #ffced0;
}
.wrapper .pirce{
	font-size: 24rpx;
	font-weight: bold;
	color: #cc4e5e;
	line-height: 60rpx;
	height: 60rpx;
	text-align: center;
	margin-top: 25rpx;
	text{
		font-size: 32rpx;
	}
}
.wrapper .pircecom{
	font-size: 24rpx;
	color: #cc4e5e;
	line-height: 60rpx;
	height: 60rpx;
	text-align: center;
}
.wrapper .right{
	padding-top: 20rpx;
}
.wrapper .right .time{
    line-height: 60rpx;
	height:60rpx;
	font-size: 24rpx;
	margin-left: 20rpx;
	color: #666;
}
.wrapper .right .nums{
	position: absolute;
	right: 20rpx;
	line-height: 60rpx;
	height: 60rpx;
	top:40rpx;
	color: #cc4e5e;
	font-weight: bold;
	font-size: 24rpx;
	text{
		font-size: 36rpx;
	}
}
.tit{
	padding-top: 100rpx;
	padding-bottom: 50rpx;
	text-align: center;
	font-weight: bold;
	image{
		width: 120rpx;
		height: 120rpx;
		display: block;
		margin: auto;
		margin-bottom: 30rpx;
	}
}
.btn{
	width: 300rpx;
	line-height: 80rpx;
	text-align: center;
	color: #fff;
	background: #aca490;
	margin: 70rpx auto;
}
</style>